<template>
    <div class="sidebar">
        <ul>
            <router-link to="/home"><li class="sidebar_a"></li></router-link>
            <li class="sidebar_b"><p class="sidebar_t"><i></i></p><p>投稿</p></li>
            <router-link to="/registerf"><li class="sidebar_c"><p class="sidebar_p">注册</p><p>缴费</p></li></router-link>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "sidebar"
    }
</script>

<style lang="scss" scoped>
    .sidebar{
        position: fixed;
        bottom: 80px;
        right: 10px;
        li{
            width: 80px;
            height: 80px;
            margin-bottom: 10px;
        }
        .sidebar_a{
            width: 72px;
            height: 72px;
            background-image: url("../../common/image/officer/u3007.png");
            background-size: 100% 100%;
            margin-left: 4px;
        }
        .sidebar_b,.sidebar_c{
            font-size: 24px;
            color: #fff;
            text-align: center;
             -webkit-border-radius: 50%;
             -moz-border-radius: 50%;
            border-radius: 50%;
            background-color: #557ae4;
            .sidebar_p{
                padding-top: 14px;
            }

            .sidebar_t{
                padding-top: 10px;
                i{
                    margin-left: 24px;
                    margin-bottom: 4px;
                    display: block;
                    width: 32px;
                    height: 32px;
                    background-image: url("../../common/image/officer/dowdload.png");
                    background-size: 100% 100%;
                }
            }
        }
    }
</style>
